<template>
	<div class="personal-details">
		<!-- <div class="personal-details-photo">
			<el-avatar  @click="linkClick('set')" :size="60" :src="data.userInfo.avatar?data.userInfo.avatar:require('../../assets/image/defalut.png')" @error="(e)=>{e.target.src = require('../../assets/image/defalut.png')}" />
			<h2  @click="linkClick('set')">{{data.userInfo.nickName}}</h2>
			
			<div @click="manageClick(store.state.userInfoX&&store.state.userInfoX.user_type)"  class="personal-details-photo-manage" v-if="store.state.userInfoX&&store.state.userInfoX.user_type > 1&&store.state.userInfoX.token">
				<img v-if="store.state.userInfoX&&store.state.userInfoX.token" class="personal-details-photo-manage" :src="store.state.userInfoX&&store.state.userInfoX.user_type==2?require('../../assets/image/icon_manage.png'):require('../../assets/image/icon_sup_manage.png') " >
				<span v-if="store.state.userInfoX&&store.state.userInfoX.token" :style="{color:store.state.userInfoX&&store.state.userInfoX.user_type==2?'#1d65ff':'#d81e06'}">{{store.state.userInfoX&&store.state.userInfoX.user_type==2?'管理员':'超级管理员'}}</span>
			</div>
			<div @click="manageClick(store.state.userInfoX&&store.state.userInfoX.user_type)"  class="personal-details-photo-manage" v-if="!store.state.userInfoX || store.state.userInfoX&&!store.state.userInfoX.token">
				<img v-if="store.state.userInfoX&&store.state.userInfoX.token" class="personal-details-photo-manage" :src="store.state.userInfoX&&store.state.userInfoX.user_type==2?require('../../assets/image/icon_manage.png'):require('../../assets/image/icon_sup_manage.png') " >
				<span v-if="store.state.userInfoX&&store.state.userInfoX.token" :style="{color:store.state.userInfoX&&store.state.userInfoX.user_type==2?'#1d65ff':'#d81e06'}">{{store.state.userInfoX&&store.state.userInfoX.user_type==2?'管理员':'超级管理员'}}</span>
				<span v-else>去登录</span>
			</div>
			
			
		</div> -->
		<div class="personal-details-content">
			<div class="personal-details-content-shell" v-for="(item,index) in data.navData" v-show="item.type==0?false:true">
				<!-- <h3 v-if="item.menu_name">{{item.menu_name}}</h3> -->
				<div :title="item.count_show?item.count:''" v-if="item.type==1?(store.state.userInfoX&&store.state.userInfoX.user_type>1?true:false):true" class="personal-details-content-list" @click="linkClick(item.path,index)" >
					<!-- <el-badge :value="item.count_show?item.count:''" class="item"> -->
					<span :style="{background:data.selectIndex === index?'#f9ab08':'#A2ABBD'}"><img :src="data.selectIndex === index?item.selectImg:item.img" ></span>
					<span :style="{color:data.selectIndex === index?'#f9ab08':'#636d7e'}">{{item.name}}</span>
					<!-- </el-badge> -->
				</div>
			</div>
		</div>
		<!-- <div class="personal-details-public">
			<div title="发布作品" class="personal-details-go-public hoverActive" @click="linkClick('communityPublic')">
				+
			</div>
		</div> -->
	</div>
</template>

<script lang="ts" setup>
	import { reactive,onMounted,onUnmounted } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { inject } from "vue";
	import {HttpPersonal} from '../../public/http'
	import bus from '../../public/bus'
	const store = inject('store')
	const router = inject('router')
	

	let data = reactive({
		userInfo:{} as any,
		navData:[{
			name:'首页',
			path:'community',
			img:require('../../assets/image/icon_nav_home_hover.png'),
			selectImg:require('../../assets/image/icon_nav_home_hover.png'),
			menu_name:"菜单",
		},{
			name:'我的',
			path:'public',
			count:0,
			img:require('../../assets/image/icon_nav_public_hover.png'),
			selectImg:require('../../assets/image/icon_nav_public_hover.png'),
			count_show:true
		},{
			name:'评论',
			path:'news',
			count:0,
			img:require('../../assets/image/icon_nav_commonts_hover.png'),
			selectImg:require('../../assets/image/icon_nav_commonts_hover.png'),
			count_show:true
		},{
			name:'收藏',
			path:'star',
			count:0,
			img:require('../../assets/image/icon_nav_star_hover.png'),
			selectImg:require('../../assets/image/icon_nav_star_hover.png'),
			count_show:true
		},{
			name:'开源',
			path:'sourceList',
			img:require('../../assets/image/icon_nav_push_hover.png'),
			selectImg:require('../../assets/image/icon_nav_push_hover.png'),
			menu_name:"",
	  },{
			name:'游戏',
			path:'gameList',
			img:require('../../assets/image/icon_nav_game_hover.png'),
			selectImg:require('../../assets/image/icon_nav_game_hover.png'),
			menu_name:"",
	  },{
			name:'面试',
			path:'chat',
			img:require('../../assets/image/icon_chat.png'),
			selectImg:require('../../assets/image/icon_chat.png'),
			menu_name:"",
	  },{
			name:'+',
			path:'communityPublic',
			count:0,
			img:require('../../assets/image/icon_public_hover.png'),
			selectImg:require('../../assets/image/icon_public_hover.png'),
		}],
		
		selectIndex:0,
		setIndex:-1
	})
	
	// ,{
	// 	name:'内推',
	// 	path:'interpolate',
	// 	img:require('../../assets/image/icon_nav_push_hover.png'),
	// 	selectImg:require('../../assets/image/icon_nav_push_hover.png'),
	// 	menu_name:"",
	// }
	//,{
	// 	name:'人员管理',
	// 	path:'userManage',
	// 	img:require('../../assets/image/icon_user_hover.png'),
	// 	selectImg:require('../../assets/image/icon_user_hover.png'),
	// 	type:store.state.userInfoX&&store.state.userInfoX.token&&store.state.userInfoX.user_type>1?1:0,
	// 	menu_name:"管理",
	// },{
	// 	name:'文章审核',
	// 	path:'articleReview',
	// 	img:require('../../assets/image/icon_review_hover.png'),
	// 	selectImg:require('../../assets/image/icon_review_hover.png'),
	// 	type:store.state.userInfoX&&store.state.userInfoX.token&&store.state.userInfoX.user_type>1?1:0
	// },{
	// 	name:'消息推送',
	// 	path:'push',
	// 	img:require('../../assets/image/icon_nav_news_hover.png'),
	// 	selectImg:require('../../assets/image/icon_nav_news_hover.png'),
	// 	menu_name:"设置",
	// },{
	// 	name:'修改密码',
	// 	path:'revise',
	// 	img:require('../../assets/image/icon_nav_password_hover.png'),
	// 	selectImg:require('../../assets/image/icon_nav_password_hover.png'),
	// 	type:store.state.userInfoX&&store.state.userInfoX.token?2:0
	// },{
	// 	name:'退出登录',
	// 	path:'',
	// 	img:require('../../assets/image/icon_nav_logout_hover.png'),
	// 	selectImg:require('../../assets/image/icon_nav_logout_hover.png'),
	// 	type:store.state.userInfoX&&store.state.userInfoX.token?2:0
	// }
	
	// 跳转
	const linkClick = (path,index,type)=>{
		data.selectIndex = index
		sessionStorage.setItem("navSelect",index)
		if(path){
			router.push(`/${path}`)
			return
		}
		if(!store.state.userInfoX || (store.state.userInfoX&&!store.state.userInfoX.token)){
			store.commit('isLogoutMain')
			return
		}
	}
	// 基本信息
	const personalMain = (e)=>{
		if(!store.state.userInfoX || e){
			HttpPersonal().then((res)=>{
				if(res&&res.code === 200){
					data.userInfo = res.data
					data.navData[1].count = res.data.releaseCount
					data.navData[2].count = res.data.commentsCount
					data.navData[3].count = res.data.collectionCount
					let oldUserInfo = store.state.userInfoX
					oldUserInfo.nickName = res.data.nickName
					oldUserInfo.user_type = res.data.user_type
					oldUserInfo.avatar = res.data.avatar
					store.commit("userInfoMain",JSON.stringify(oldUserInfo))
				}
				
			})
		}
		
	}
	bus.on("reviseSuccess",personalMain)
	onUnmounted(()=>{
		bus.off("reviseSuccess",personalMain)
	})
	onMounted(()=>{
		personalMain()
		
		const navSelect = sessionStorage.getItem("navSelect")
		if(navSelect==null){
			return
		}
		data.selectIndex = Number(navSelect)
		
	})
</script>

<style lang="scss">
	.personal-details{
		position: relative;
		width: 100%;
		height: 100%;
		background: #fff;
		border-right: 1px solid #fafafa;
	
		.personal-details-content{
			padding: 30px 20px;
			height: calc(100% - 100px);
			position: relative;
			overflow: auto;
			.personal-details-content-shell{
				&:nth-last-of-type(1){
					position: fixed;
					left: 0;
					margin: auto;
					bottom: 0;
					width: 100px;
					height: 75px;
					background: white;
					span{
						&:nth-of-type(1){
							display: none;
						}
						&:nth-of-type(2){
							width: 40px;
							height: 40px;
							box-shadow: 0 0 10px 0 #aaa;
							border-radius: 60%;
							display: inline-block;
							text-align: center;
							line-height: 40px;
							font-size: 30px;
						}
					}
				}
			}
			h3{
				color: white;
				font-size: 16px;
				letter-spacing: 1px;
				margin-bottom: 15px;
				font-weight: 500;
				&:nth-of-type(2){
					margin-top: 30px;
				}
			}
			.personal-details-content-list{
				width: 100%;
				display: flex;
				justify-content: flex-start;
				flex-direction: column;
				align-items: center;
				margin-bottom: 24px;
				cursor: pointer;
				&:hover{
					opacity: 0.8;
				}
				span{
					
					&:nth-child(1){
						width: 30px;
						height: 30px;
						background: #2e2e35;
						border-radius: 10px;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 0px;
						img{
							width: 15px;
							height: 15px;
							vertical-align: -2px;
						}
					}
					&:nth-child(2){
						font-size: 14px;
						color: #9195a1;
						letter-spacing: 1px;
						margin-top: 8px;
					}
				}
				
			}
		}
		&-public{
			display: flex;
			justify-content: space-around;
			.personal-details-public-list{
				display: flex;
				flex-direction: column;
				text-align: center;
				cursor: pointer;
				strong{
					font-size: 18px;
				}
				span{
					font-size: 12px;
				}
			}
			.personal-details-go-public{
				position: fixed;
				bottom: 100px;
				right: 50px;
				width: 60px;
				height: 60px;
				box-shadow: 0 0 20px 0 #aaa;
				text-align: center;
				line-height: 60px;
				font-size: 35px;
				border-radius: 60%;
				z-index: 9;
				color: #1e1c2a;
				background-color: white;
			}
		}
		&-customer-service{
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin-top: 100px;
			img{
				width: 50%;
			}
		}
		&-logout{
			width: 100%;
			position: absolute;
			bottom: 0;
			button{
				width: 100%;
				height: 50px;
				border: 0;
				border-bottom: 1px solid #ccc;
				color: #222;
				border-radius: 0;
				background-color: transparent;
				margin: 0!important;
				text-align: center;
				
			}
		}
	}
	
</style>
